<template>
    <div>
        <div class="navbar bg-base-100">
            <div class="navbar-start">
                <div class="dropdown">
                    <label tabindex="0" class="btn btn-ghost lg:hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 6h16M4 12h8m-8 6h16" />
                        </svg>
                    </label>
                    <ul tabindex="0"
                        class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a>菜单</a></li>
                        <li>
                            <a>菜单</a>
                            <ul class="p-2">
                                <li><a>菜单 1</a></li>
                                <li><a>菜单 2</a></li>
                            </ul>
                        </li>
                        <li><a>菜单 3</a></li>
                    </ul>
                </div>
                <a class="btn btn-ghost normal-case text-xl">网站名称</a>
            </div>
            <div class="navbar-center hidden lg:flex">
                <ul class="menu menu-horizontal px-1">
                    <li><a>菜单 1</a></li>
                    <li tabindex="0">
                        <details>
                            <summary>菜单</summary>
                            <ul class="p-2">
                                <li><a>菜单 1</a></li>
                                <li><a>菜单 2</a></li>
                            </ul>
                        </details>
                    </li>
                    <li><a>菜单 3</a></li>
                </ul>
            </div>
            <div class="navbar-end">
                <button class="btn btn-ghost btn-circle">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </button>
                <button class="btn btn-ghost btn-circle">
                    <div class="indicator">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                        </svg>
                        <span class="badge badge-xs badge-primary indicator-item"></span>
                    </div>
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import http from "@/http/index.js";
import moment from "moment";
import mixins from "@/mixins/index.js";
moment.locale("zh-cn");
import { clear, getToken, getUserInfo } from "@/utils/myauth.js";
export default {
    mixins: [mixins],
    data() {
        return {
            // 登录
            ifToken: true,
            notoken: false,
            input2: "",
            lang: [
                {
                    zh: "ZH-CN・USD",
                },
                {
                    zh: "ZH-CN・USD",
                },
                {
                    zh: "ZH-CN・USD",
                },
            ],
            lists: [],
            minutes: "",
            userinfo: [], //用户信息
            usershow: false, //用户头像显示
        };
    },
    filters: {
        dataFormat(type) {
            switch (type) {
                case 1:
                    return "Item Sold";
                case 2:
                    return "Bid Activity";
                case 3:
                    return "Price Change";
                case 4:
                    return "Auction Expiration";
                case 5:
                    return "Outbid";
                case 6:
                    return "Owned Item Updates";
                case 7:
                    return "Successful Purchase";
                case 8:
                    return "Hengpai Newsletter";
            }
        },
    },
    methods: {
        aboutus() {
            this.$router.push("/aboutus");
        },
        //语言切换
        selete(index) {
            if (index == 0) {
                this.$i18n.locale = "zh";
            } else if (index == 1) {
                this.$i18n.locale = "en";
            } else if (index == 2) {
                this.$i18n.locale = "ko";
            }
        },
        // 我的藏品/出价等跳转
        creates(index) {
            // 我的藏品
            if (index == 1) {
                this.$router.push({
                    path: "/mycollection",
                    query: {
                        type: 1,
                    },
                }); //我的铸造
            } else if (index == 2) {
                this.$router.push({
                    path: "/mycollection",
                    query: {
                        type: 2,
                    },
                });
            } else if (index == 3) {
                //我的关注
                this.$router.push({
                    path: "/mycollection",
                    query: {
                        type: 4,
                    },
                });
            } else if (index == 4) {
                //出价藏品
                this.$router.push({
                    path: "/mycollection",
                    query: {
                        type: 6,
                    },
                });
            } else if (index == 5) {
                //收到的报价
                this.$router.push({
                    path: "/mycollection",
                    query: {
                        type: 7,
                    },
                });
            } else if (index == 6) {
                //退出账号
                clear();
                this.$message({
                    message: "退出成功!",
                    type: "success",
                });
                this.$router.push({
                    path: "/",
                });
                window.location.reload();
            } else if (index == 7) {
                this.$router.push("/login");
            } else if (index == 8) {
                this.$router.push({
                    path: "login",
                    query: {
                        type: 9,
                    },
                });
            }
        },
        //跳转到探索页面
        explore(index) {
            if (index == 6) {
                this.$router.push("/allcollections");
            } else {
                this.$router.push({
                    path: "/collection",
                    query: {
                        type: index,
                    },
                });
            }
        },
        //跳转到个人页面
        login() {
            this.$router.push({
                path: "/mycollection",
            });
        },
        //跳转到首页
        Jump() {
            this.$router.push({
                path: "/",
            });
        },
        //跳转到通知
        notice() {
            this.$router.push({
                path: "/notice",
            });
        },
        //获取通知
        init() {
            http.notify_list({
                page: 1,
                size: 3,
            }).then((res) => {
                this.lists = res.data.data;
                //转换为当前时间之前
                res.data.data.forEach((item) => {
                    this.minutes = moment(item.created_at).fromNow();
                });
            });
        },
        //跳转到连接钱包页面
        create() {
            this.$router.push({
                path: "/create_click",
            });
        },
        //排行
        markieting() {
            this.$router.push({
                path: "/ranking",
            });
        },
        //交易记录
        ranking() {
            this.$router.push({
                path: "/marketing",
            });
        },
    },
    computed: {},
    created() {
        if (getToken() != null) {
            this.init();
        } else {
        }
        if (getUserInfo() != null) {
            //如果有用户信息，则获取用户信息
            this.userinfo = getUserInfo();
            this.usershow = true;
            // console.log(this.userinfo,'用户信息');
        } else {
            //如果没有用户信息
            this.usershow = false;
        }
    },
    mounted() {
        //退出登录 显示其他按钮
        let token = getToken();
        if (token == null) {
            this.ifToken = false;
            this.notoken = true;
        }
    },
};
</script>

<style scoped lang="scss">
.navs {
    display: flex;
    width: 100%;
    height: 72px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    justify-content: space-between;


    .tongimg {
        width: 50px;
        height: 50px;
        border-radius: 50%;

        img {
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    }

    .images {
        display: flex;
        width: 219px;
        align-items: center;
        margin: 6px 59px 12px 30px;

        :nth-child(1) {
            width: 40px;
            height: 35px;
        }

        :nth-child(2) {
            width: 100px;
            height: 25px;
            margin-left: 10px;
            margin-top: 4px;
        }
    }

    ::v-deep .el-input__inner {
        width: 580px;
        border-radius: 15px;
        margin: 14px 0px;
    }

    .ipts {
        flex-grow: 1;
    }

    ::v-deep .el-input {
        width: 580px;
    }

    .left {
        display: flex;
        justify-content: center;
        align-items: center;
        // margin-left: 310px;
        margin-right: 30px;

        .ones:hover .exple {
            background: #fff;
        }

        .left-c {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            .left-ding {
                position: relative;
                box-sizing: border-box;

                .extwo {
                    height: 112px !important;
                }

                .three {
                    height: 168px !important;
                }

                .exple {
                    position: absolute;
                    top: 45px;
                    left: 0;
                    width: 217px;
                    height: 336px;
                    border-radius: 5px;
                    display: none;
                    background: #fff;
                    padding-top: 12px;
                    border-radius: 0px 0px 10px 10px;
                    z-index: 999;

                    li {
                        width: 217px;
                        height: 56px;
                        text-align: left;
                        line-height: 56px;
                        padding: 0px 0px 0px 15px;
                        background: #fff;
                        font-style: normal;
                        font-weight: 500;
                        font-size: 16px;
                        color: #353840;
                        box-sizing: border-box;
                        border: 1px solid #ffffff;
                    }

                    :last-child {
                        border-radius: 0px 0px 10px 10px;
                    }

                    li:hover {
                        border: 1px solid #e6e6e6;
                        background: #fbfdff;
                    }
                }
            }

            .left-ding:hover .exple {
                display: block;
            }

            .left-ding:hover .ones {
                background: #f3f4f6;
            }

            .ones {
                width: 111px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                border-radius: 540px;
                margin-right: 10px;
            }

            .ones:hover {
                background: #f3f4f6;
            }

            .ones:hover .exple {
                background: #fff;
                padding-bottom: 10px;
            }

            .stats {
                width: 111px;
                height: 44px;
                line-height: 44px;
                line-height: 44px;
                background: #f3f4f6;
                text-align: center;
                margin-right: 10px;
                border-radius: 540px;
            }

            .about {
                width: 111px;
                height: 44px;
                line-height: 44px;
                line-height: 44px;
                background: #f3f4f6;
                text-align: center;
                margin-right: 10px;
                border-radius: 540px;
            }
        }

        .shu {
            width: 1px;
            height: 24px;
            line-height: 24px;
            background-color: #d1d5db;
        }

        .dingwei {
            position: relative;
            cursor: pointer;
        }

        .dingwei:hover .langy {
            display: block;
        }

        .dingwei:hover .lang {
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin-left: 18px;
            background: url(@/assets/icon/home/qius.png) no-repeat;
            background-size: 100% 100%;
            transform: scale(2);
        }

        .lang {
            position: relative;
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin-left: 18px;
            background: url(@/assets/icon/home/qiu.png) no-repeat;
            background-size: 100% 100%;
        }

        .langy {
            position: absolute;
            left: -20px;
            top: 15px;
            width: fit-content;
            height: fit-content;
            text-align: left;
            transition: height 0.35s;
            padding-top: 30px;
            display: none;
            z-index: 999;

            :nth-child(3) {
                border-radius: 0px 0px 10px 10px;
            }

            .name {
                padding-left: 15px;
                width: 100px;
                height: 56px;
                line-height: 56px;
                background-color: #ffffff;
                box-sizing: border-box;
                border: 1px solid #ffffff;
                transition: height 0.5s;
            }

            .name:hover {
                border: 1px solid #d1d5db;
                background: #fbfdff;
            }
        }

        .titles {
            line-height: 24px;
            margin-left: 17px;
        }

        .tong {
            position: relative;
            width: 40px;
            height: 40px;
            margin-left: 28px;
            text-align: center;

            .timg {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 18px;
                height: 20px;
                line-height: 20px;
                background: url(@/assets/icon/home/wtong.png) no-repeat;
                background-size: 100% 100%;
                z-index: 999;
            }

            .stimg {
                position: absolute;
                top: 15%;
                left: 70%;
                width: 6px;
                height: 6px;
                background: #3772ff;
                border-radius: 50%;
            }

            .exples {
                position: absolute;
                top: 41px;
                left: -370px;
                width: 439px;
                height: 310px;
                padding-top: 20px;
                display: none;
                background: #fff;
                padding-top: 12px;
                border-radius: 0px 0px 10px 10px;
                z-index: 9999;

                li {
                    width: 100%;
                    height: 80px;
                    padding: 0px 0px 0px 15px;
                    background: #fff;
                    font-style: normal;
                    font-weight: 500;
                    font-size: 16px;
                    color: #353840;
                    box-sizing: border-box;
                    border: 1px solid #e5e8eb;
                    display: flex;
                    align-items: center;
                    text-align: left;
                }

                .one {
                    width: 49px;
                    height: 21px;
                    margin-left: 230px;
                    display: flex;

                    :nth-child(1) {
                        margin-right: 6px;
                    }

                    :nth-child(2) {
                        width: 10px;
                        height: 4px;
                        margin-right: 6px;
                    }
                }

                .name {
                    margin-left: 8px;

                    .xing {
                        width: fit-content;
                    }

                    .ins {
                        display: flex;

                        .names {
                            width: 256px;
                            height: 20px;
                            font-style: normal;
                            font-weight: 350;
                            font-size: 14px;
                            line-height: 21px;
                            display: flex;
                            align-items: center;
                            color: #a7a7a7;
                        }

                        .colo {
                            width: 6px;
                            height: 6px;
                            background: #2081e2;
                            border-radius: 50%;
                            margin-left: 65px;
                        }
                    }

                    .time {
                        font-style: normal;
                        font-weight: 350;
                        font-size: 12px;
                        line-height: 18px;
                        color: #a7a7a7;
                    }
                }

                :last-child {
                    border-radius: 0px 0px 10px 10px;
                }

                li:hover {
                    border: 1px solid #e6e6e6;
                    background: #fbfdff;
                }
            }
        }

        .tong:hover {
            background: #f3f4f6;
            border-radius: 22px;
        }

        .tong:hover .exples {
            display: block;
        }

        .btn {
            width: 96px;
            height: 44px;
            margin-left: 30px;
        }

        .union {
            width: 40px;
            height: 40px;
            // margin-left: 16px;
            margin-bottom: 5px;
            cursor: pointer;

            .userinfo {
                display: block;
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }

        .dings {
            position: relative;
            margin: 0px 20px;
            width: 40px;
            height: 40px;

            .times {
                position: absolute;
                top: 20px;
                left: -85px;
                padding-top: 31px;
                z-index: 99;
                cursor: pointer;
                display: none;

                .names {
                    padding-left: 15px;
                    width: 220px;
                    height: 56px;
                    line-height: 56px;
                    background-color: #ffffff;
                    box-sizing: border-box;
                    border: 2px solid #ffffff;
                }

                .names:hover {
                    border: 2px solid #d1d5db;
                    background: #fbfdff;
                }
            }
        }

        .dings:hover .times {
            display: block;
        }
    }
}</style>
